{% extends "tcms_base.html" %}
{% load report_tags %}
{% load static %}
{% block subtitle %}Components Report - {{ product }}{% endblock %}
{% block custom_stylesheet %}
<link rel="stylesheet" type="text/css" href="{% static 'style/print.css' %}" media="print" />
{% endblock %}

{% block custom_javascript %}
<script type="text/javascript" src="{% static 'js/report.js' %}"></script>
<script type="text/javascript">
Nitrate.Utils.after_page_load(Nitrate.Report.List.on_load);
</script>
{% endblock %}

{% block contents %}
<div id="content">
	{% include 'report/nav.html' %}
	<div class="Detailform border-1" style="background:#f1f1f1 ;">
		{% if component %}
		<div class="report">
			<h2>Component: {{ component }}</h2>
			{% include "report/case_runs_status_subtotal.html" %}
		</div>
		{% endif %}
		<table class="list report" border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<th width="20%">Component</th>
					<th width="20%">Case Runs</th>
					<th width="35%">Case Runs Progress</th>
					<th width="25%">Failed Case Runs</th>
				</tr>
				{% for component in components %}
				<tr>
					<td class="variety_0">
						<a href="?component_id={{ component.id }}">{{ component }}</a>
					</td>
					<td class="variety_1">
						<span class="">{{ component.total_cases }}</span>
					</td>
					<td class="variety_4">
						<div class="progress-bar">
							<div class="progress-inner" style="width:{{ component.finished_case_run_percent|default:'0' }}%">
								<div class="percent">{{ component.finished_case_run_percent|default:'0' }}%</div>
							</div>
						</div>
					</td>
					<td>
						{% if component.failed_case_run_count %}
						<span class="strong emphasize">{{ component.failed_case_run_count|default:'0' }} Failed</span>
						{% endif %}
					</td>
				</tr>
				{% endfor %}
			</table>
	</div>
</div><!--content over -->
{% endblock %}
